<template>
  <view>
    <u-navbar :is-back="false" background="#f1f2f6" :border-bottom="false"></u-navbar>
    <view class="image-id">
      <view class="text-id">
        <view>在线专业证件照</view>
        <view>十秒快速制作</view>
        <view class="text-item"> Nice ID Photo </view>
      </view>
      <image class="item-image" src="../../static/images/pg.png" mode="aspectFit"></image>
    </view>
    <view class="content">
      <view class="heard">
        <view class="heard-card color1" @click="toPage('make')">
          <image src="../../static/images/zz.png" mode=""></image>
          <view>证件照制作</view>
        </view>
        <view class="heard-card color2" @click="toPage('change')">
          <image src="../../static/images/ds.png" mode=""></image>
          <view>更换底色</view>
        </view>
        <view class="heard-card color3" @click="toPage('cutting')">
          <image src="../../static/images/cj.png" mode=""></image>
          <view>裁剪证件照</view>
        </view>
      </view>
      <view class="text">
        <view class="text-heard">规格参考</view>
        <view class="text-card">
          <view class="card-item" v-for="(item, index) in list" :key="index">
            <view style="color: #000000; font-size: 34rpx">{{ item.title }}</view>
            <view style="color: #999999; font-size: 28rpx">像素尺寸: {{ item.desc }} px</view>
            <u-tag :text="item.mask" type="info" mode="plain" size="mini" class="mask" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { pixel } from '../data.js';
export default {
  data() {
    return {
      list: pixel,
    };
  },
  onShareAppMessage(res) {
    if (res.from === 'button') {
      console.log(res.target);
    }
    return {
      title: '一键工具箱',
      path: '/pages/index/index',
    };
  },
  methods: {
    toPage(page) {
      uni.navigateTo({
        url: `/pages/index/${page}`,
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f1f2f6;
}
</style>

<style lang="scss" scoped>
page {
  background-color: #f1f2f6;

  .image-id {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0 30rpx;
    border-bottom: 1px solid #cccccc;
    width: 690rpx;

    .text-id {
      font-size: 48rpx;
      line-height: 70rpx;
      font-weight: bold;
      letter-spacing: 6rpx;

      .text-item {
        letter-spacing: 0;
        font-size: 38rpx;
        font-weight: 400;
        color: #999999;
      }
    }

    .item-image {
      width: 200rpx;
      height: 200rpx;
    }
  }

  .content {
    .heard {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 30rpx;
      height: 280rpx;
      width: 690rpx;

      .heard-card {
        width: 200rpx;
        height: 200rpx;
        padding: 20rpx;
        border-radius: 16rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        box-shadow: 0 5px 8px #aaaaaa;

        image {
          width: 100rpx;
          height: 100rpx;
          margin-bottom: 10rpx;
        }
      }

      .color1 {
        background-image: linear-gradient(135deg, #abdcff 10%, #0396ff 100%);
      }

      .color2 {
        background-image: linear-gradient(135deg, #feb692 10%, #ea5455 100%);
      }

      .color3 {
        background-image: linear-gradient(135deg, #ce9ffc 10%, #7367f0 100%);
      }
    }

    .text {
      margin: 0 30rpx;
      width: 690rpx;

      .text-heard {
        font-size: 38rpx;
        font-weight: bold;
        margin: 20rpx 0;
      }

      .text-card {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 690rpx;

        .card-item {
          width: 330rpx;
          margin-bottom: 30rpx;
          padding: 20rpx;
          line-height: 50rpx;
          border-radius: 16rpx;
          background: #fefefe;

          .mask {
            margin-top: 20rpx;
          }
        }
      }
    }
  }
}
</style>
